<template>
  <div v-cloak>
    <el-form
      :model="comic"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="漫画名称" prop="comic_title">
        <el-col :span="11">
          <el-input v-model="comic.comic_title"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="作者" prop="comic_author">
        <el-col :span="11">
          <el-input v-model="comic.comic_author"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="漫画类别" prop="types">
        <el-col :span="8">
          <el-checkbox-group v-model="comic.types">
            <el-checkbox label="魔幻" name="types"></el-checkbox>
            <el-checkbox label="悬疑" name="types"></el-checkbox>
            <el-checkbox label="搞笑" name="types"></el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-form-item>



      <el-form-item label="简介" prop="comic_intro">
        <el-col :span="11">
          <el-input type="textarea" v-model="comic.comic_intro"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="状态" prop="comic_state">
        <el-radio-group v-model="comic.comic_state">
          <el-radio label="连载中">连载中</el-radio>
          <el-radio label="完结">完结</el-radio>
        </el-radio-group>
      </el-form-item>

        <el-form-item label="封面">
        <el-col :span="5">
          <el-upload
            ref="comicCover"
            class="avatar-uploader"
            :action="`${$http.defaults.baseURL}/update_comic_cover`"
            :on-success="afterUpload"
            :on-error="coverUpErr"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="comic.comic_cover"
              :src="comic.comic_cover"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm"
          >立即创建</el-button
        >
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

export default {
  data() {
    return {
      comic:{},
      inputVisible: false,
      inputValue: "",
    };
  },
async created(){
     this.comic = JSON.parse(JSON.stringify(this.$store.getters.Comic));
     this.$set(this.comic,'types',this.comic.comic_type.split(' '))
  },
 methods: {
    coverUpErr(){
        console.log('封面上传失败回调');
    },
    handleClose(tag) {
      this.comic.types.splice(this.comic.types.indexOf(tag), 1);
    },
  afterUpload(res){
      // 显示设置personInfo的 user_cover值
      this.$set(this.comic, 'comic_cover', res.url)
    }, 
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.comic.types.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    async submitForm() {
     this.comic.comic_type = this.comic.types.join(' ')
      let res = await this.$http.post('/update_comic',this.comic)
      this.$message({
        type:res.data.type,
        message:res.data.message
      })
      this.$store.commit('SET_COMIC', {})
      this.$router.push('/comicsManage/comicList')
    },
    resetForm() {
      this.comic = JSON.parse(JSON.stringify(this.$store.getters.Comic));
      this.comic.types = this.comic.comic_type.split(' ');
    },
  },
};
</script>

<style scoped>
[v-cloak] {
  display: none;
}
.component-item {
  margin-top: 100px;
}
.code-part {
  margin-top: 20px;
}
.avatar-uploader-icon {
  border: 1px dashed #898989;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

 .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
